<template>
  <div class="uLogin">
    <u-head :title="tit"></u-head>
    <div class="box">
      <div class="main">
        <img class="logo" src="../assets/images/logo.png" alt="" />
        <div>
          <van-cell-group>
            <van-field
              v-model="username"
              label="手机号"
              placeholder="请输入手机号"
            />
            <van-field
              v-model="password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field
              v-model="reg"
              center
              clearable
              label="验证码"
              placeholder="请输入短信验证码"
            >
              <template #button>
                <van-button size="small" type="info">发送验证码</van-button>
              </template>
            </van-field>
          </van-cell-group>
          <van-button @click="goLogin" class="login" type="default">登录</van-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import uHead from "../components/public/uHead.vue";
import http from "../utils/http"
export default {
  components: {
    uHead,
  },
  data() {
    return {
      tit: "手机登录",
      username: "",
      password: "",
      reg: "",
    };
  },
  methods:{
    goLogin(){
      http.post('/api/login',{phone:this.username,password:this.password}).then(res=>{
        if(res.code==200){
          localStorage.setItem('user',JSON.stringify({token:res.list.token,uid:res.list.uid}))
          alert("登录成功，即将跳往首页")
          this.$router.replace('/index')
        }else{
          alert(res.msg);
        }
      })
    }
  }
};
</script>
<style scoped>
.uLogin {
  max-width: 7.5rem;
  min-width: 3.2rem;
}
.box {
  height: 13.6rem;
  background: #ccc;
  text-align: center;
  padding-top: 0.2rem;
}
.main {
  display: inline-block;
  height: 13.4rem;
  width: 7.1rem;
  background: #fff;
  overflow: hidden;
}
.logo {
  margin-top: 4.88rem;
  margin-bottom: 0.88rem;
  width: 3.64rem;
  height: 0.96rem;
}
.login {
  width: 6.1rem;
  height: 0.98rem;
  background: #ccc;
}
.input2 {
  width: 7.5rem;
}
</style>